<template>
  <div>
    <button @click="handleClick">显示/消失</button><br/>
    <transition
        name="animate__animated animate__bounce"
        appear
        enter-active-class="animate__rollIn"
        leave-active-class="animate__rollOut"
    >
      <div v-show="isShow" class="box">VUE动画效果</div>
    </transition>
  </div>
</template>
<!--
使用animate.css ：npm i animate.css -D
import 'animate.css'

过渡动画参考：https://v2.cn.vuejs.org/v2/guide/transitions.html
-->
<script>
import 'animate.css'

export default {
  name: "Test2-component",
  data(){
    return {
      isShow:true
    }
  },
  methods:{
    handleClick(){
      this.isShow = !this.isShow
    }
  }
}
</script>

<style scoped>
.box{
  height: 100px;
  background-color: orange;
  font-size: 40px;
  font-weight: bold;
}

</style>